<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>温度统计展示图</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//获取当前时间
			function p(s) {
			    return s < 10 ? '0' + s: s;
			}
			var myDate = new Date();
			//获取当前年
			var year=myDate.getFullYear();
			//获取当前月
			var month=myDate.getMonth()+1;
			//获取当前日
			var dayStart=myDate.getDate()-2;
			var dayEnd=myDate.getDate();  
			
			var h=myDate.getHours();       //获取当前小时数(0-23)
			var m=myDate.getMinutes();     //获取当前分钟数(0-59)
			var s=myDate.getSeconds();  
			var endTime = year+'-'+p(month)+"-"+p(dayEnd)+" "+p(h)+':'+p(m)+":"+p(s);
			
			if(dayStart == 0){
				var nowdays = new Date();
			    var year = nowdays.getFullYear();
			    var month = nowdays.getMonth();
			    if(month==0)
			    {
			        month=12;
			        year=year-1;
			    }
			    /* if (month < 10) {
			        month = "0" + month;
			    } */
			    var myDate = new Date(year, month, 0);
			    dayStart = myDate.getDate();
			}
			
			var dayEnd=myDate.getDate(); 
			var startTime = year+'-'+p(month)+"-"+p(dayStart)+" "+p(h)+':'+p(m)+":"+p(s);
			
			$("#startTime").val(startTime);
			$("#endTime").val(endTime);
			
			showCharts();
			
		});
		
		function showCharts(){
			var sensorName = $("#sensorName").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			
			if(startTime == endTime || startTime > endTime){
				$.jBox.alert('结束如期不能小于开始日期', '错误');
			}else{
				var load = layer.load(1);
				$.ajax({
					type: "post",
					dataType: "json",
					url: "${ctx}/ccsenhumidata/sensorHumiData/tempHumiData",
					data: {"sensorName":sensorName, "startTime":startTime, "endTime":endTime},
					timeout: 60000,
					success: function(data){
						layer.close(load);
						if(data.success == "success"){
							//设置当前层级
							if(data.nowLevel != ""){
								$("#nowLevel").html("[" + data.nowLevel + "]");
							}
							
							$("#echartsdiv").show();
							var xAxisTempData = data.xAxisTempData.split(',');
							var seriesTempData = data.seriesTempData.split(',');
							var upperTempData = data.upperTempData.split(',');
							var lowerTempData = data.lowerTempData.split(',');
							
							var myChart = echarts.init(document.getElementById('echartsdiv'));
							option = {
							    title: {
							        text: '温度分布图'
							    },
							    tooltip: {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross'
							        }
							    },
							    toolbox: {
							    	show: true,
							    	showTitle: false,
							    	right: '3%',
						        	feature: {
							            dataView: {readOnly: true},
							            magicType: {type: ['line', 'bar', 'point']},
							            restore: {},
							            saveAsImage: {}
							        }
							    },
							    xAxis:  {
							        type: 'category',
							        boundaryGap: false,
							        data: xAxisTempData
							    },
							    yAxis: {
									min: function(value) {
									    return value.min - 4;
									},
							    	max: function(value) {
									    return value.max + 5;
									},
							        type: 'value',
							        axisLabel: {
							            formatter: '{value} ℃'
							        },
							        axisPointer: {
							            snap: true
							        }
							    },
							   
							    series: [
							    	{
							            name:'时间              ',
							            type:'line',
							            smooth: true,
							        },
							        {
							            name:'温度',
							            type:'line',
							            smooth: true,
							            data: seriesTempData,
							            markPoint : {  
				                            data : [  
				                                {type : 'max', name: '最大值'},  
				                                {type : 'min', name: '最小值'}  
				                            ]
				                        },  
							            markLine : {  
				                            data : [  
				                                {type : 'average', name: '平均值'}  
				                            ]  
				                        },
				                        itemStyle: {
									        normal: {
									            color: "#1E91FF",
									            lineStyle: {
									                color: "#1E91FF"
									            }
									        }
									    }
							        },
							        {
							        	name: '温度上限',
							        	type: 'line',
							        	smooth: true,
							        	symbol: 'none',
							        	data: upperTempData,
							        	itemStyle: {
									        normal: {
									            color: "#FFA500",
									            lineStyle: {
									                color: "#FFA500"
									            }
									        }
									    }
							        },
							        {
							        	name: '温度下限',
							        	type: 'line',
							        	smooth: true,
							        	symbol: 'none',
							        	data: lowerTempData,
							        	itemStyle: {
									        normal: {
									            color: "#2E8B57",
									            lineStyle: {
									                color: "#2E8B57"
									            }
									        }
									    }
							        }
							    ]
							};
							//绑定ECharts参数
							myChart.setOption(option);
						}else{
							//设置当前层级
							if(data.nowLevel != ""){
								$("#nowLevel").html("[" + data.nowLevel + "]");
							}
							$("#echartsdiv").hide();
							$.jBox.alert('所选传感器该时段内无数据!', '提示');
						}
					},
					error:function(a,b,c){
						layer.close(load);
					}
					
				});
			}
			
		}
		
		function closeTree(){
			var openCloseDiv = document.getElementById('openClose'); 
			openCloseDiv.click();
		}
		
	</script>
	<style type="text/css">
		body{
			color: #000000;
		}
		#searchBtn{
			margin-left: 15px;
		}
		#officeContent{
			border: none;
		}
		#nowLevel{
			color: #000;
		}
	</style>
</head>
<body>
	<div id="content" class="row-fluid">
		<div id="left">
			<div class="accordion-heading">
				<a class="accordion-toggle">组织树
					<i id="colseBtn" class="icon-remove pull-right" onclick="closeTree();"></i>
					<label id="nowLevel"></label>
				</a>
			</div>
			<iframe id="officeContent" src="${ctx}/cchierarchy/hierarchy/list" width="100%" height="100%" frameborder="0"></iframe>
		</div>
		<div id="openClose" class="close">&nbsp;</div>
		<div id="right">
			<div class="breadcrumb">
				<tr>
					<td><label>传感器名称</label></td>
					<td> 
						<span style="font-size:12px; margin-left: 10px;">
							<select id = "sensorName" class="sensorName" name = "sensorName" required="true" style="width:220px; margin-top: -5px;">  
								<c:forEach var="item" items="${sensorList}">
									<option value="${item.MAC}">${item.NAME}</option>
								</c:forEach>
				 			</select>
			 			</span>
					</td>
					<!-- 开始和结束时间设置为不可清空 -->
					<td><label style="margin-left: 15px;">开始时间</label></td>
					<td>
				 		<label> <input type="text" id="startTime" class="startTime" style="width: 190px; margin-top: 5px; margin-left: 10px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})" /> </label>
					</td>
					<td><label style="margin-left: 15px;">结束时间</label></td>
					<td>
				 		<label> <input type="text" id="endTime" class="endTime" style="width: 190px; margin-top: 5px; margin-left: 10px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})" /> </label>  
					</td>
					<td>
						<label> <input type="submit" id="searchBtn"  class="btn btn-primary" value="查询" style="margin-top: -5px;" onclick="showCharts()"></input> </label>
					</td> 
				</tr>
			</div>
			
			<div id="echartsdiv" style="height: 650px; width: 100%; "></div>
		</div>
	</div>
	
	<script type="text/javascript">
	   		
		var leftWidth = "350"; // 左侧窗口大小
		var htmlObj = $("html"), mainObj = $("#main");
		var frameObj = $("#left, #openClose, #right, #right iframe");
		function wSize(){
			var strs = getWindowSize().toString().split(",");
			htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
			mainObj.css("width","auto");
			frameObj.height(strs[0] - 5);
			var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
			$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
			$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
		}
	</script>
	<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>